<template>
    <div class="container">
        <!-- 头部 -->
        <van-nav-bar 
        title='项目图片'
        left-text="返回" 
        left-arrow
        @click-left="onClickLeft">
            <template #right>
                <div @click="toUser" class="nav-img"><img src="../assets/user.png" ></div>
            </template>
        </van-nav-bar>
        <!-- 主要内容 -->
        <div class="album-list">
            <div class="floor f1">
                <div class="hd">
                    <div class="floor-title">整体外观</div>
                </div>
                <div class="bd">
                    <div class="img-list">
                        <div class="img-item" v-for="item in albumList1" :key="item">
                            <img :src="item" preview="1" alt="" preview-text="整体外观">
                        </div>
                    </div>
                </div>
            </div>
            <div class="floor f2">
                <div class="hd">
                    <div class="floor-title">效果图</div>
                </div>
                <div class="bd">
                    <div class="img-list">
                        <div class="img-item" v-for="item in albumList2" :key="item">
                            <img :src="item" preview="2" alt="" preview-text="效果图">
                        </div>
                    </div>
                </div>
            </div>
            <div class="floor f3">
                <div class="hd">
                    <div class="floor-title">楼层平面图</div>
                </div>
                <div class="bd">
                    <div class="img-list">
                        <div class="img-item" v-for="item in albumList3" :key="item">
                            <img :src="item" preview="3" alt="" preview-text="楼层平面图">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            EngineerObject:{},
            // 整体外观
            albumList1:[],
            // 效果图
            albumList2:[],
            // 楼层平面图
            albumList3:[],
        }
    },
    created(){
        console.log(this.$route.query.object)
        this.EngineerObject=JSON.parse(this.$route.query.object)
        this.albumList1=this.EngineerObject.realEstateTheOverallAppearanceOfTheProjectImages.replace('[', '').replace(']', '').split(",");
        this.albumList2=this.EngineerObject.realEstateEffectImages.replace('[', '').replace(']', '').split(",");
        this.albumList3=this.EngineerObject.realEstateFloorPlanDuexImages.replace('[', '').replace(']', '').split(",");
    },
    methods:{
        // 返回上一级
        onClickLeft(){
            this.$router.go(-1)
        },
        // 去用户信息
		toUser(){
			this.$router.push({path:"/user"})
		},
    }
}
</script>
<style lang="less" scoped>
/// 顶部样式
/deep/.van-nav-bar__text{
	color: #333;
}
/deep/.van-nav-bar{
	.van-icon{
		color: #333;
	}
}
.nav-img{
	img{
		width: 0.39rem;
		height: 0.39rem;
	}
}
// 主要内容
.album-list{
    padding: 0 0.34rem;
}
.floor-title{
    font-size: 0.34rem;
    font-weight: 600;
    color: #333;
    padding: 0.25rem 0;
}
.img-list{
    display: flex;
    flex-wrap: wrap;
    .img-item{
        width: 50%;
        height: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
            width:95%;
            height: 95%;
        }
    }
}
</style>